<template>
	<view class="home-wrap">
		<view class="curtain relative">
			<view class="top">
				<view class="location">
					<view class="text-overflow">
						<text class="iconfontPT icondingwei02"></text>
						<view class="city inline-block white" @click="handleJumpCity">{{ detail.city || '全国' }}</view>
					</view>
				</view>
				<view class="home-title w100 text-center white">车一转共享平台</view>
			</view>
		</view>
		<navigator v-if="authorizeTipsShow" class="authorize-tips" url="/pages/authorize">
			<icon class="authorize-tips__icon" type="info" size="20"/>
			请授权头像等信息，以便为您提供更好的服务 →
		</navigator>
		<view class="header">
			<view class="swiper-box">
				<swiper class="swiper w100 h100" indicator-dots="true" autoplay="true" circular="true" interval="5000" indicator-color="#fff" indicator-active-color="#E41805">
					<block v-for="(item, index) in requestBannerList" :key="index">
						<swiper-item class="swiper-item text-center w100 h100">
							<view class="swiper-item w100 h100" @click="handleJumpPage(item.url)">
								<image class="img w100 h100" :src="`${qiniuHost}${item.image}-t.m98xx`" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
			<view class="notice flex-x-start">
				<view class="notice__icon"><text class="iconfontPT icontongzhi"></text></view>
				<view class="notice__title"><text class="title bold">通知</text></view>
				<view class="notice__txt-wrap"><NoticeSwiper :list="notices" @handleNotice="handleNotice" :height="'46rpx'" /></view>
			</view>

			<view class="nav-bar flex-x-start">
				<view v-for="(item, index) in nabBar" class="item text-center" :key="index" v-if="item.status">
					<navigator :url="item.path" hover-class="none" @click="handleNavigator(item)" class="nav-bar__navigator">
						<image class="icon block" :src="item.url"></image>
						<text class="name">{{ item.name }}</text>
						<text class="sub-name">{{ item.sub_name }}</text>
					</navigator>
				</view>
			</view>
		</view>

		<view class="home__content">
			<view class="recommend-wrapper">
				<view class="recommend shop-recommend">
					<view class="recommend__title bold">
						二手车推荐
						<text class="recommend__sub-title">SECOND HAND CAR</text>
					</view>
					<view class="recommend__content hot-used-car">
						<block>
							<GoodsSwiper :datas="hotUsedCars" :config="hotUsedCarsConfig" v-slot:goodsSlot="{ goodItem, goodIndex }">
								<view class="hot-used-car__item" @click="gotoInfoPage(goodItem.id)">
									<image class="car-msg__img" :src="goodItem.image" mode="aspectFill" lazy-load="true"></image>
									<view class="car-msg">
										<view class="car-msg__name u-line-2">{{ goodItem.carname }}</view>
										<view class="car-msg__card-time">
											<text class="car-msg--label car-msg--label--style2">{{ goodItem.card_time }}</text>
											<text class="car-msg--label">{{ goodItem.mileage }}</text>
										</view>
										<view class="car-msg__price">{{goodItem.update_price||goodItem.price}}万</view>
										<!-- {{carMsg.is_drop ? carMsg.update_price : carMsg.car.update_price || carMsg.car.price }} -->
									</view>
									<view class="car-tags">
										<view class="car-tags__tag car-tags__tag--fast" v-if="goodItem.is_fast">急</view>
										<view class="car-tags__tag car-tags__tag--drop" v-if="goodItem.is_drop">降</view>
										<view class="car-tags__tag car-tags__tag--new" v-if="goodItem.is_fast && goodItem.is_drop ? false: goodItem.is_new">新</view>
									</view>
								</view>
							</GoodsSwiper>

							<no-data v-if="hotUsedCars.length === 0" />
						</block>
					</view>
				</view>

				<view class="recommend group-recommend" v-if="showstatus">
					<view class="recommend__title bold">
						组局推荐
						<text class="recommend__sub-title">ORGANIZATION RECOMMEND</text>
					</view>
					<view class="recommend__content">
						<block v-if="groupRecommendList.length > 0">
							<view class="group-list-wrap" v-if="groupRecommendList.length > 0">
								<view class="group-item" v-for="(item2, index2) in groupRecommendList" :key="index2"><groupTpl :groupData="item2" :customHost="qiniuHost" /></view>
							</view>
						</block>

						<no-data v-else />
					</view>
				</view>

				<view class="recommend shop-recommend">
					<view class="recommend__title bold">
						店铺推荐
						<text class="recommend__sub-title">SHOPPING RECOMMEND</text>
					</view>
					<view class="recommend__content">
						<block>
							<GoodsSwiper
								:datas="shopRecommendList"
								:config="goodsSwiperConfig"
								v-slot:goodsSlot="{ goodItem, goodIndex }"
								@change="goodsSwiperChange"
								@tapFun="goodsSwiperTap"
							>
								<ShopRecommendItem :item="goodItem" />
							</GoodsSwiper>

							<no-data v-if="shopRecommendList.length === 0" />
						</block>
					</view>
				</view>
			</view>
		</view>
		<StationedIn :value="stationedInPopupShow&&state==='sm'" @close="handleStationedInPopupClose" :type="type"></StationedIn>
		<homeTabBar :showstatus="showstatus" />

	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import homeTabBar from '.././home-tab-bar/index.vue';
import location from '../../utils/location.js';
import { getRecommend, getHomePageBannerList } from '../../apis/public/index.js';
import Star from '../components/public/star.vue';
import ShopRecommendItem from '../components/shopRecommendItem.vue';
import groupTpl from '../components/life-circle/group-tpl.vue';
import NoticeSwiper from '../components/noticeSwiper.vue';
import GoodsSwiper from '../components/public/goodsSwiper.vue';
import StationedIn from '../components/index/stationed-in.vue'

export default {
	data() {
		return {
			authorizeTipsShow:false,
			stationedInPopupShow:true,
			factory_id:"",
			list: [
				{
					name: '店铺推荐'
				},
				{
					name: '组局推荐'
				}
			],
			noticeId: 0,
			showstatus: 1,
			detail: {
				city: '成都市'
			},
			notices: [],
			nabBar: [
				{
					url: '/static/images/new_car.png',
					path: '/pages/new-car',
					name: '新车',
					sub_name: '热销车型',
					status: 1,
					homeCurrentTabbar: 1
				},
				{
					url: '/static/images/old_car.png',
					path: '/pages/used-car',
					name: '二手车',
					sub_name: '自由买卖',
					status: 1,
					homeCurrentTabbar: 3
				},
				{
					url: '/static/images/group.png',
					path: '/pages/life-circle?homeCurrentTabbar=2&lifeCircleCurrentTabbar=0',
					name: '组局',
					sub_name: '发起活动',
					status: 1,
					homeCurrentTabbar: 2
				},
				{
					url: '/static/images/recruit.png',
					path: '/pages/recruit',
					name: '招聘',
					sub_name: '招贤纳士',
					status: 1,
					homeCurrentTabbar: 0
				}
				// {
				// 	url: '/static/images/shop.png',
				// 	path: '/pages/shop',
				// 	name: '店铺',
				// 	status: 1
				// }
			],
			bannerList: [],
			requestBannerList: [],
			shopRecommendList: [],
			shopRecommendListSkelenton: [{}, {}],
			groupRecommendList: [],
			hotUsedCars: [],
			latitude: uni.getStorageSync('location').latitude,
			longitude: uni.getStorageSync('location').longitude,

			screenWidth: 750,
			goodsSwiperConfig: {
				autoplay: true,
				multiple: 2,
				rightMargin: '22rpx',
				current: 0,
				interval: 3000,
				duration: 500,
				circular: true,
				swiperStyle: {
					height: '468rpx'
				},
				swiperItemStyle: {},
				goodsBoxStyle: {}
			},
			hotUsedCarsConfig: {
				autoplay: true,
				multiple: 2,
				rightMargin: '22rpx',
				current: 0,
				interval: 3000,
				duration: 500,
				circular: true,
				swiperStyle: {
					height: '370rpx'
				}
			},
			loading: true,
			state:null,
			type:null,
		};
	},
	async onLoad(options) {
		this.state = options.state
		this.type = options.type
		uni.setStorageSync('identity', 1);
		await this.getLocationFn();
		this.getBannerList();
		this.initRequest();
		this.factory_id = uni.getStorageSync('factory_id')
	},
	async onShow() {
		this.authorizeTipsShow = !uni.getStorageSync('openId')
		// this.$loading.show();
		this.loading = true;
		let _this = this;
		_this.showstatus = uni.getStorageSync('showSataus');
		this.$store.dispatch('home-tab-bar/setCurrentTabbar', 0);
		if (this.openId) {
			this.timlogin();
		}
	},
	computed: {
		host() {
			return this.$baseHost.car;
		},
		qiniuHost() {
			return this.$baseHost.qiniuHost;
		},
		...mapGetters(['openId', 'myTimInfo'])
	},
	components: {
		homeTabBar,
		Star,
		ShopRecommendItem,
		groupTpl,
		NoticeSwiper,
		GoodsSwiper,
		StationedIn
	},
	methods: {
		handleJumpCity(){
			uni.navigateTo({
				url: `/pages/new-car/component/city-model/city`
			})
			uni.$once('city-change',city=>{
				this.detail.city = city
				this.initRequest();
			})
		},
		handleStationedInPopupClose(){
			this.stationedInPopupShow = false
		},
		async initRequest() {
			this.notices = [];
			this.shopRecommendList = [];
			this.groupRecommendList = [];
			this.hotUsedCars = [];
			this.showstatus = 1;

			await this.getRecommendList();

			setTimeout(() => {
				this.$loading.hide();
				this.loading = false;
			}, 0);
		},

		async timlogin() {
			const userID = this.openId + '_group',
				userSig = uni.getStorageSync('userSigGroup');
			// case1: 要登录的用户是当前已登录的用户，则直接跳转即可
			if (this.myTimInfo.userID && userID === this.myTimInfo.userID) return;
			// case2: 当前已经登录了用户，但是和即将登录的用户不一致，则先登出当前登录的用户，再登录
			if (this.myTimInfo.userID) {
				this.$store.dispatch('tim/resetStore');
				uni.$Tim.logout().then(() => {
					this.login(userID, userSig);
				});
				return;
			}
			// case3: 正常登录流程
			await this.login(userID, userSig);
			
		},
		async login(userID, userSig) {
			try{
				await uni.$Tim.login({userID,userSig})
				
			}catch(e){
				console.log('tim登录失败!!!');
			}
		},
		getBannerList() {
			getHomePageBannerList().then(res => {
				this.requestBannerList = res.data.carousel || [];
			});
		},
		getRecommendList() {
			getRecommend({
				city:uni.getStorageSync('position'),
				lat:uni.getStorageSync('location').latitude,
				lng:uni.getStorageSync('location').longitude
			}).then(res => {
				if (res.code === 1) {
					const { placard, md_ad, zj_ad, second_ad, status } = res.data;

					this.notices = placard || [];
					this.shopRecommendList = md_ad || [];
					this.groupRecommendList = zj_ad || [];
					this.hotUsedCars = second_ad || [];
					this.showstatus = status;
					uni.setStorageSync('showSataus', status);

					this.nabBar.map((item, index) => {
						if (index === 2) {
							item.status = status;
						}
						return item;
					});
				}
			});
		},
		handleNotice(noticeId) {
			uni.navigateTo({
				url: `/pages/notice?noticeId=${noticeId}`
			});
		},
		handleNavigator({ homeCurrentTabbar, path }) {
			if(homeCurrentTabbar===2 && !uni.getStorageSync('openId')){
				uni.navigateTo({url:'/pages/authorize'})
				return false
			}
			if (homeCurrentTabbar === 1 || homeCurrentTabbar === 2 || homeCurrentTabbar === 3) {
				this.$store.dispatch('home-tab-bar/setCurrentTabbar', homeCurrentTabbar);

				uni.switchTab({
					url: path
				});
			}
		},
		//获取定位城市
		async getLocationFn() {
			const [,{latitude,longitude}]= await uni.getLocation({type:'wgs84'})
			const {data} = await location(latitude, longitude)
			const city = data.result.ad_info.city
			const address = data.result.address;
			this.detail.city = city
			uni.setStorageSync('location', {latitude,longitude,address,city})
			uni.setStorageSync('position', city.replace(/市/, ''))
		},

		goodsSwiperChange(current) {},

		goodsSwiperTap(e) {},

		gotoInfoPage(val) {
			uni.navigateTo({
				url: '/pages/used-car/infoPage?car_id=' + val
			});
		},
		handleJumpPage(url){
			uni.switchTab({url});
		}
	}
};
</script>

<style lang="less">
.u-mode-center-box{
	background-color: transparent !important;
}
.home-wrap {
	color: #333;
	padding-bottom: 146rpx;

	.curtain {
		height: 430rpx;
		background: url('http://cdn1.cheyizhuan.com/home/home_top.jpg-t.m90xx');
		background-size: cover;
		background-position: center bottom;

		.top {
			position: absolute;
			top: 103rpx;
			left: 30rpx;
			right: 30rpx;

			.location {
				position: absolute;
				top: 0;
				left: 0;
				width: 200rpx;

				.iconfontPT {
					color: #fff;
				}

				.city {
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

	.header {
		margin-top: -280rpx;
		padding: 30rpx;
		background-color: #fff;

		.home-title {
			font-size: 36rpx;
			font-weight: 500;
		}

		.swiper-box {
			height: 280rpx;
			width: 100%;
			border-radius: 10rpx;
			overflow: hidden;

			.img {
				border-radius: 10rpx;
			}
		}

		.nav-bar {
			margin: 20rpx 0 0;
			justify-content: space-between;
			// padding: 0 24rpx;

			&__navigator {
				height: 100%;
				padding: 15rpx;
				text-align: left;
			}

			.item {
				background-color: #fc7d77;
				width: calc(100% / 4 - 16rpx);
				border-radius: 10rpx;
				height: 160rpx;
				background-image: url('http://cdn1.cheyizhuan.com/home/home_nav_1.png-t.m90xx');
				background-size: cover;
				background-position: center bottom;

				&:nth-child(2) {
					background-color: #fca05e;
					background-image: url('http://cdn1.cheyizhuan.com/home/home_nav_2.png-t.m90xx');
				}

				&:nth-child(3) {
					background-color: #7f8ffc;
					background-image: url('http://cdn1.cheyizhuan.com/home/home_nav_3.png-t.m90xx');
				}

				&:nth-child(4) {
					background-color: #3a94fd;
					background-image: url('http://cdn1.cheyizhuan.com/home/home_nav_4.png-t.m90xx');
				}

				.icon {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					display: none;
				}

				.name {
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
					display: block;
					color: #fff;
				}

				.sub-name {
					color: #fff;
					font-size: 20rpx;
				}
			}
		}
	}

	.notice {
		// border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx 0;
		margin-top: 10rpx;

		.swiper-main .swiper-content {
			width: 100%;
		}

		&__txt-wrap {
			width: calc(100% - 126rpx);
		}

		&__title {
			margin: 0 0 0 10rpx;

			.title {
				font-size: 30rpx;
				color: #333;
			}
		}

		&__icon {
			background-color: #ff9e34;
			border-radius: 10rpx;
			width: 36rpx;
			height: 36rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.icontongzhi {
				color: #fff;
				font-size: 24rpx;
			}
		}

		&__item {
			color: #333;
			font-size: 24rpx;
		}

		.icon-detail {
			font-size: 24rpx;
		}
	}

	.home__content {
		background-color: #f8f8f8;
		padding: 36rpx 30rpx;

		.recommend {
			font-size: 24rpx;
			margin-bottom: 32rpx;
			width: 100%;

			&:last-child {
				margin-bottom: 0;
			}

			&__title {
				font-size: 36rpx;
				margin-bottom: 20rpx;
				color: #333;
				font-weight: bold;
			}

			&__sub-title {
				color: #6a6a6a;
				font-size: 24rpx;
				font-weight: bold;
				margin-left: 6rpx;
			}

			&__swiper-box {
				flex: 1;
			}

			&__swiper-item {
				height: 100%;
			}

			.system-msg-content {
				margin-top: 10rpx;
			}

			.waterfall-flow {
				position: relative;
			}

			&-wrapper {
				.group-recommend {
					.system-msg-content .footer .location-wrap .left {
						width: 542rpx;
					}
				}

				.shop-recommend--skeleton {
					display: flex;
					justify-content: space-between;
					width: 100%;

					.item {
						padding: 20rpx;
						margin-right: 0;

						.tag {
							display: block;
							height: 40rpx;
						}

						.info__bottom {
							left: 30rpx;
							right: 30rpx;
							bottom: 20rpx;
						}
					}
				}

				.tabs {
					height: unset;
					min-height: 600rpx;

					.active-switch {
						.active-item {
							background-color: unset;
							border-bottom: unset;

							&.focus {
								.item {
									font-size: 36rpx;
								}
							}

							.item {
								font-size: 30rpx;
								font-weight: bold;
								color: #333;
								transition: 0.3s;
							}
						}

						.switch-container .focus-line {
							border-bottom: 4rpx solid rgba(228, 24, 5, 0.7);
						}
					}
				}
			}

			&:last-child {
				border-bottom: 0;
			}

			&.group-recommend {
				border-bottom: 0;

				.system-msg-content .footer .location-wrap .left {
					width: 542rpx;
				}

				.item {
					.cover {
						.number-wrap {
							position: absolute;
							right: 15rpx;
							bottom: 15rpx;
							z-index: 111;
							font-size: 22rpx;
							color: #ffffff;

							.iconfontPT {
								font-size: 20rpx;
								margin-right: 10rpx;
								color: #fd830e;
							}
						}
					}
				}
			}

			.title {
				font-size: 36rpx;
				margin-bottom: 20rpx;
				color: #333;
			}

			.item {
				width: 314rpx;
				height: 448rpx;
				margin-right: 22rpx;
				margin-bottom: 20rpx;
				color: #333;
				box-shadow: 0rpx 6rpx 8rpx 2rpx rgba(153, 153, 153, 0.1);
				border-radius: 10rpx;
				overflow: hidden;
				background-color: #fff;
				align-self: flex-start;
				position: relative;

				image {
					height: 280rpx;
				}

				.info {
					padding: 0 10rpx 10rpx;
					background-color: #fff;

					&__name {
						height: 72rpx;

						.tag {
							color: #333;
							font-size: 26rpx;
							font-weight: bold;
							line-height: 36rpx;
						}
					}

					&__coupon {
						margin-bottom: 30rpx;

						&__item {
							border: 1px solid #ffb8b1;
							border-radius: 8rpx;
							background-color: #fff8f8;
							margin: 0 20rpx 0 0;
							padding: 4rpx 10rpx;
							color: #e41805;
							font-size: 20rpx;
						}
					}

					&__bottom {
						display: flex;
						align-items: center;
						position: absolute;
						bottom: 16rpx;
						left: 10rpx;
						right: 10rpx;
					}

					&__ver-line {
						font-size: 22rpx;
						color: #666;
						font-weight: 500;
						margin: 0 16rpx;
					}

					&__star {
						margin: 20rpx 0;
						position: absolute;
						top: -10rpx;
						left: 10rpx;
						background-color: rgba(0, 0, 0, 0.5);
						padding: 2rpx 6rpx 6rpx;
						border-radius: 10rpx;
					}

					.read-number,
					.info__distance {
						font-size: 22rpx;
						color: #666;
						font-weight: 500;
					}

					.price-currency {
						font-size: 20rpx;
					}
				}
			}
		}

		.hot-used-car {
			width: 100%;
			margin-top: 30rpx;

			&__item {
				box-shadow: 0px 7px 6px 0px rgba(0, 0, 0, 0.01);
				border-radius: 10rpx;
				background-color: #fff;
				margin-right: 22rpx;

				height: 370rpx;
				// width: 280rpx;
				overflow: hidden;
				position: relative;
				
				.car-msg {
					padding: 14rpx;

					&__img {
						width: 100%;
						height: 180rpx;
					}
					&__name {
						color: #333;
						font-size: 24rpx;
						height: 63rpx;
					}

					&__price {
						font-size: 30rpx;
						color: #e74438;
						font-weight: 600;
					}

					&__card-time {
						margin: 20rpx 0 10rpx;
					}

					&--label {
						border-radius: 8rpx;
						background-color: rgba(68, 169, 255, 0.6);
						margin: 0 10rpx 0 0;
						padding: 4rpx 10rpx;
						color: #fff;
						font-size: 20rpx;

						&--style2 {
							background-color: rgba(255, 129, 55, 0.6);
						}
					}
				}
				
				.car-tags{
					position: absolute;
					top: 0;
					right: 0;
					display: flex;
					&__tag{
						width: 32rpx;
						height: 37rpx;
						color: #FFFFFF;
						border-radius: 5rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 22rpx;
						margin-right: 10rpx;
						&--fast{
							background: linear-gradient(#F88133,#F63E2B);
						}
						&--drop{
							background: linear-gradient(#F76547,#F53C38);
						}
						&--new{
							background: linear-gradient(#7CF595,#52D341);
						}
					}
				}
			}
		}
	}

	.group-list-wrap {
		background: #f8f8f8;

		.group-item {
			margin-bottom: 18rpx;

			.description {
				margin-top: 10rpx;
				display: block;
			}
		}

		.system-msg-content .header {
			margin-top: unset;
			padding: 0;
		}
	}
}

.authorize-tips{
	position: fixed;
	left: 0;
	top: 180rpx;
	width: 100vw;
	display: flex;
	align-items: center;
	background-color: rgba(255,255,255,.8);
	height: 88rpx;
	padding: 0 30rpx;
	color: #666666;
	&__icon{
		margin-right: 10rpx;
	}
	z-index: 999;
}
</style>
